<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-table
            :data="customers"
            border
            style="width: 100%">
        <el-table-column
                prop="name"
                label="名称"
                width="150">
        </el-table-column>
        <el-table-column
                prop="ownerUser.name"
                label="所有者"
                width="120">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="座机"
                width="120">
        </el-table-column>
        <el-table-column
                prop="website"
                label="网站"
                width="300">
        </el-table-column>
        <el-table-column
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            customers:[],
            pn: 1,
            pageSize:5,
            total:undefined
        },
        methods: {
            initData(){//获取表格数据
                axios.get("/customer",{params:{
                        pageNum:this.pn,
                        pageSize: this.pageSize
                    }}).then(resp=>{
                        let data=resp.data;
                        this.customers=data.result;
                        this.total=data.total
                })
            }
        },
        created(){
            this.initData();
        }
    })
</script>
</body>
</html>